
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多终端播放器测试 demo「支持在 pc 端和移动端播放视频 」</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            max-width: 900px;
        }

        .player-wrap {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 56.25%;
        }

        .player {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .play-control {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="player-wrap">
        <div class="player"></div>
    </div>
    <div class="play-control">
        <button class="test">播放</button>
    </div>
    <!-- 多终端播放器 JS -->
    <script src="https://player.polyv.net/script/polyvplayer.min.js"></script>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.8.0/qs.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
        let player;


        // 必须通过 URL 传 secretKey, userId, vid 这几个参数，不然控制台会报错
        // const { secretKey, userId, vid } = window.location.href.queryURLParams();
		const secretKey = "gSY9VLUvC9";
		const userId = "69d2b9ae21";
		const vid = "69d2b9ae21e01bff0b0bbfa38002e3f2_6"
		const token ="d08ed2ff-e942-4576-90df-deda04e276c1-j6113002057";
		const { ts, sign } = getSign(secretKey, vid);
		initVodPlayer(vid, ts, sign, token);
        // 初始化点播播放器，传入 token, vid, secretKey
        function initVodPlayer(vid, ts, sign, token) {
            // 相关测试操作，可以在这里写代码。具体情况具体分析
            player = polyvObject(".player").videoPlayer({
                width: "100%",
                height: "100%",
                vid: vid,
                ts: ts,
                sign: sign,
                playsafe: token,
                forceH5: true,
                // 敲黑板！测试播放器属性，可以在下面添加代码
                // 比如，想要设置自定义观众信息，就可以参考文档：https://dev.polyv.net/2020/videoproduct/v-player-sdk/v-player-sdk-web/reference/
                viewerInfo: {
                    viewerId: "3116002084", // 观众ID
                    viewerName: "Dreamer", // 观众昵称
                    viewerAvatar: "https://livestatic.videocc.net/assets/wimages/missing_face.png", // 观众头像URL
                    viewerExtraInfo1: "param3", // 自定义额外信息字段1
                    viewerExtraInfo2: "param4", // 自定义额外信息字段2
                    viewerExtraInfo3: "param5" // 自定义额外信息字段3
                }
            });

            // 敲黑板！测试播放器接口
            /* 
                方式1：可以在下面播放器事件代码里面添加代码测试，比如，添加 player.j2s_seekVideo(100); 跳转到 100 秒后播放
                方式2：给一个按钮绑定事件，点击按钮的时候，调用播放器接口测试
             */
            $(".test").on("click", function(){
                player.j2s_resumeVideo();
            })


            // 敲黑板！测试播放器事件
            window.s2j_onPlayerInitOver = function () {
                // 比如，想要测试播放器事件，可以在下面添加代码
                player.on("s2j_onPlayStart", function (vid) {
                    var totalTime = player.j2s_getDuration();
                    console.log("视频总时长为：", totalTime);
                });
            }
        }


        // 获取移动端 H5 播放加密视频所需的签名
        function getSign(secretKey, vid) { 
            const ts = new Date().getTime();
            const sign = md5(`${secretKey}${vid}${ts}`);
			console.log(ts, sign, "Xzj -> sign")
            return {
                ts,
                sign
            }
        }




    </script>
    <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
    <script>
        // init vConsole
        var vConsole = new VConsole();
        console.log("可以在这里看到移动端控制台的打印耶");
    </script>
</body>

</html>